<template>
    <rx-layout>
        <div slot="center">
            <rx-fit :isheader="isheader">
                <div slot="toolheader" border="false" foldbtn="false">
                    <div class="table-operator">
                        <a-button type="primary" icon="plus" @click="add">
                            {{$ti18('rxList.newBtn','新增')}}
                        </a-button>

                    </div>
                    <span class="search-btn-box" v-if="!isheader">
            <span class="search-btn" @click.stop="searchshow"><i class="iconfont iconguolv"></i>
                {{$ti18('rxList.leachBtn','过滤')}}
            </span>
          </span>
                </div>
                <div btnalign="right" slot="searchbar" v-if="fitSearch" @search="search" @cancel="cancel"
                     @close="closeSearchbar">
                    <a-form :layout="colLayout">
                        <a-row :gutter="24">
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.dimensionName','维度名称')">
                                    <a-input :placeholder="i18n('form.dimensionName','维度名称','input')" v-model="queryParam.Q_NAME__S_LK"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.status','状态')">
                                    <a-select :placeholder="i18n('form.status','状态','select')" v-model="queryParam.Q_STATUS__S_LK"
                                              :allowClear="true">
                                        <a-select-option value="ENABLED">{{i18n('form.enable','启用')}}</a-select-option>
                                        <a-select-option value="DISABLED">{{i18n('form.disable','禁用')}}</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <rx-grid
                    ref="table"
                    :bordered="isBorder"
                    :multiSelect="true"
                    :columns="columns"
                    :defaultPageSize="10"
                    url="/api-user/user/org/osDimension/query"
                    :queryParam="queryParam"
                    data-field="result.data"
                    :pageSizeOptions="['10','30','40']"
                    id-field="dimId"
                    @selectChange="onSelectChange"
                    :getCheckboxProps="getCheckboxProps"
                >
                  <span slot="isGrant" slot-scope="{ text, record }">
                      <a-tag :color="isGrantMap[text].color">
                      <span>{{isGrantMap[text].text}}</span>
                      </a-tag>
                  </span>

                  <span slot="status" slot-scope="{ text, record }">
                      <a-tag :color="statusMap[text].color">
                      <span>{{statusMap[text].text}}</span>
                      </a-tag>
                  </span>
                  <span slot="action" slot-scope="{text, record}" class="actionIcons">
                    <span @click="edit(record)" v-if="canEdit(record)">
                        {{$ti18('rxList.editBtn','编辑')}}
                    </span>
                    <span @click="rankTypeclick(record)" v-show="record.showType=='TREE'" :title="i18n('form.levelManagement','等级管理')">
                        {{i18n('form.levelManagement','等级管理')}}
                    </span>
                    <span @click="delByIds([record.dimId])" v-if="canDel(record)">
                        {{$ti18('rxList.delBtn','删除')}}
                    </span>
                  </span>
                </rx-grid>
            </rx-fit>
        </div>
    </rx-layout>
</template>

<script>
    import OsDimensionApi from '@/api/user/org/osDimension'
    import OsDimensionEdit from './OsDimensionEdit.vue'
    import OsRankTypeList from './OsRankTypeList.vue'
    import {BaseList, RxLayout, RxFit, RxGrid} from "@lowcode/jpaas-common-lib"

    import {mapState} from 'vuex';
    import userState from "@/assets/js/userState";

    export default {
        name: 'TableList',
        mixins: [BaseList, userState],
        components: {
            OsDimensionEdit,
            OsRankTypeList,
            RxLayout,
            RxFit,
            RxGrid
        },
        data() {
            return {
                // 查询参数
                queryParam: {},
                // 表头
                columns: [
                    {key: '01', title: this.i18n('form.dimensionName','维度名称'), width: 120, dataIndex: 'name',},
                    {key: '02', title: this.i18n('form.encoded','编码'), width: 120, dataIndex: 'code'},
                    {
                        key: '03',
                        title: this.i18n('form.joinEmpower','参与授权'),
                        width: 120,
                        dataIndex: 'isGrant',
                        scopedSlots: {customRender: 'isGrant'}
                    },
                    {key: '04', title: this.i18n('form.status','状态'), width: 120, dataIndex: 'status', scopedSlots: {customRender: 'status'}},
                    {key: '05', title: this.i18n('form.sortNumber','排序号'), width: 80, dataIndex: 'sn'},
                    {title: this.$ti18('rxForm.createTime','创建时间'), dataIndex: 'createTime', sorter: true, sortField: 'CREATE_TIME_', width: 120},
                    {key: '07', title: this.$ti18('rxList.action','操作'), width: 140, dataIndex: 'action', scopedSlots: {customRender: 'action'}}
                ],
                component: OsDimensionEdit,
                comment: this.i18n('list.comment','组织维度'),
                widthHeight: ['800px', '600px'],
                isGrantMap: {
                    "YES": {color: 'green', text: this.i18n('isJoinEmpowerMap.yes','是否参与授权') },
                    "NO": {color: 'red', text:  this.i18n('isJoinEmpowerMap.no','是否参与授权') }
                },
                statusMap: {
                    "ENABLED": {color: 'green', text: this.i18n('statusMap.startUsing','状态') },
                    "DISABLED": {color: 'red', text: this.i18n('statusMap.forbidden','状态') }
                },

            }
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name, text, "osDimension",key);
            },
            getListByParams(parameter) {
                return OsDimensionApi.query(parameter)
            },
            delById(ids) {
                return OsDimensionApi.del({ids: ids.join(',')})
            },
            rankTypeclick(record) {
                let title = record.name + '-' + this.i18n('form.levelManagement','等级管理')
                this.$layer.iframe({
                    content: {
                        content: OsRankTypeList, //传递的组件对象
                        parent: this, //当前的vue对象
                        data: {dimId: record.dimId}
                    },
                    area: ['800px', '500px'],
                    title: title,
                    resize: true,
                    shade: false,
                    maxmin: true,
                    cancel: () => {
                        //关闭事件
                    }
                })
            },
            search() {
                this.$refs.table.loadData();
            },
            cancel() {
                this.resetSearch();
            },
            closeSearchbar() {
                //关闭过滤弹窗；（点击X触发）
                this.fitSearch = false;
            },
        },

    }
</script>
